<template>
  <div class="search">
    <span class="iconfont icon-fanhuipt" @click="$router.go(-1)"></span>
    <van-search
      shape="round"
      v-model="keyword"
      placeholder="请输入搜索关键词"
      @search="searchFn"
      value="kewsd"
    />
    <div class="search_wrap" v-if="!keyword">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotList"
          :key="index"
          @click="kewo"
          >{{ obj.first }}</span
        >
      </div>
    </div>
    <div class="search_wrap" v-else>
      <h2 class="hot_title">最佳匹配</h2>
      <!-- 控制上拉加载更多 -->

      <div
        :finished="done"
        finished-text="还没看够？到底了"
        @load="onLoadFn"
        :immediate-check="false"
        offset="100"
        class="musicList"
      >
        <dd v-for="obj in searchList" :key="obj.id" @click="acs(obj.id)">
          <div class="info">
            <div class="text">
              <h2>{{ obj.name }}</h2>
              <h3>
                <span v-for="item in searchListy.artists" :key="item.id">
                  {{ item.name }}
                </span>
              </h3>
            </div>
          </div>
        </dd>
      </div>
    </div>
  </div>
</template>
<script>
let page = 1;
import { getHot, getSearch } from "../api/base.js"; //搜索热词
import SongItem from "../components/base/player";
export default {
  data() {
    SongItem;
    return {
      keyword: "", //搜索关键词
      hotList: [], //关键词列表，数组
      searchList: [], //搜索结果列表
      loading: false, //控制每一页的加载状态
      done: false, //控制整个页面的加载状态
      kewsd: "",
      searchListy: [], //搜索第二层
    };
  },

  methods: {
    acs(id) {
      //把id传到父组件
      console.log(id);
      this.$emit("acs", id);
    },
    searchFn() {
      getSearch({ keywords: this.keyword }).then((data) => {
        this.searchList = data.result.songs;
        this.searchListy = data.result.songs[0];
        console.log(this.searchList);
        console.log(this.searchListy);
        // this.hotList = data.result.songs;
      });
    },
    // 上拉加载更多的方法
    onLoadFn() {
      // 调接口->拿数据->合并
      page++;
      getSearch(this.keyword, 20, page).then((data) => {
        // 当数据库中没有数据之后停止
        if (data.result.songs === 0) {
          this.done = true;
          return;
        }
        // 合并数组
        this.searchList = [...this.searchList, ...data.result.songs];
        // 模拟数据没有之后的文字
        // if (this.searchList.length >= 100) {
        //     this.done = true;
        //     return;
        // }
        // (文档要求)数据更新完毕后，将 loading 设置成 false 即可
        this.loading = false; //可以继续请求下一页数据（需要手动更改为false）
      });
    },
    kewo(e) {
      this.keyword = e.target.textContent;
      this.kewsd = this.keyword;

      console.log(this.kewsd);
    },
  },

  //钩子
  created() {
    getHot()
      .then((data) => {
        console.log(data.result.hots);
        this.hotList = data.result.hots;
      })
      .catch((e) => {
        console.log(e);
      }); //调用搜索热词方法
    this.searchFn(); //调用搜索方法
  },
  watch: {
    keyword() {
      this.searchFn();
    },
  },
};
</script>

<style lang="less">
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
  /*热门搜索文字标题样式 */
  .hot_title {
    font-size: 0.32rem;
    color: #666;
  }
  /* 热搜词_容器 */
  .hot_name_wrap {
    margin: 0.266667rem 0;
  }
  /* 热搜词_样式 */
  .hot_item {
    display: inline-block;
    height: 0.853333rem;
    margin-right: 0.213333rem;
    margin-bottom: 0.213333rem;
    padding: 0 0.373333rem;
    font-size: 0.373333rem;
    line-height: 0.853333rem;
    color: #333;
    border-color: #d3d4da;
    border-radius: 0.853333rem;
    border: 1px solid #d3d4da;
  }
  .musicList {
    background-color: #fff;
    width: 100%;
    border-radius: 7px;
    position: relative;
    top: 0px;

    dt {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #454747;
      border-bottom: 1px solid #e3e3e3;
      span {
        font-size: 14px;
        color: #797b7a;
      }
      i {
        width: 44px;
        text-align: center;
        display: inline-block;
      }
    }
    dd {
      border-bottom: 1px solid #e3e3e3;
      height: 53px;
      display: flex;
      h1 {
        flex: 0 0 44px;
        line-height: 53px;
        text-align: center;
        font-size: 16px;
        color: #6d6e6e;
      }
      .info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        .text {
          h2 {
            font-size: 16px;
            color: #1b1c1c;
            margin-top: 10px;
          }
          h3 {
            font-size: 12px;
            color: #929393;
          }
        }
        .bofang {
          font-size: 24px;
          line-height: 53px;
          text-align: center;
          padding-right: 10px;
        }
      }
    }
  }
}
</style>
